<template>
  <div class="bonus_box_r">
    <div class="right_infor_title">
      <span>{{ boundsName || info.boundsName }}</span>
    </div>
    <div class="right_infor_tips">
      <div class="detail_imporatnt_one">
        <div class="iconfont color_blue icontouxiang6"></div>
        <div>
          <div>{{ info.userName }}</div>
          <div class="detail_imporatnt_one_cont">{{ newType === '1' ? '加' : '减' }}分对象</div>
        </div>
      </div>
      <div class="detail_imporatnt_one">
        <div class="iconfont color_blue">
          <i class="el-icon-s-help"></i>
        </div>
        <div>
          <!-- <div v-if="$route.query.result">{{ enmuData($route.query.result) }}</div> -->
          <div>{{ enmuData(info.status) }}</div>
          <div class="detail_imporatnt_one_cont">当前状态</div>
        </div>
      </div>
      <div class="detail_imporatnt_one">
        <div class="iconfont color_blue">
          <i class="el-icon-time"></i>
        </div>
        <div>
          <div>{{ info.time }}</div>
          <div class="detail_imporatnt_one_cont">提交时间</div>
        </div>
      </div>
    </div>
    <div class="right_infor_main">
      <div class="infor_main_left">
        <div class="main_left_title">{{ newType === '1' ? '加' : '减' }}分项名称</div>
        <div class="main_left_content">{{ info.boundsName }}</div>
        <div v-if="info.times">
          <div class="main_left_title">次数</div>
          <div class="main_left_content">{{ info.times }}次</div>
        </div>
        <div v-if="info.headCount">
          <div class="main_left_title">人数</div>
          <div class="main_left_content">{{ info.headCount }}人</div>
        </div>
        <div class="main_left_title">{{ newType === '1' ? '加' : '减' }}分项说明</div>
        <div class="main_left_content">{{ info.boundsRemark }}</div>
        <div class="main_left_title">{{ newType === '1' ? '加' : '减' }}分项类别</div>
        <div class="main_left_content">{{ info.boundsTypeName }}</div>
        <div class="main_left_title" v-if="info.boundsLevelName">
          {{ info.boundsTypeName == '便民服务' ? '服务类别' : newType === '1' ? '加分项级别' : '减分项级别' }}
        </div>
        <div class="main_left_content" v-if="info.boundsLevelName">{{ info.boundsLevelName }}</div>
        <div class="main_left_title" v-if="info.level && info.lastTagName != ('加分项名称' || '减分项名称')">
          {{ info.lastTagName }}
        </div>
        <div class="main_left_content" v-if="info.level && info.lastTagName != ('加分项名称' || '减分项名称')">
          {{ info.level }}
        </div>
        <div class="main_left_title">
          {{
            info.boundsType == '5-02-01-01' || info.boundsType == '5-02-02-01' || info.boundsType == '5-02-03-01'
              ? '媒体报道材料'
              : '证明材料'
          }}
        </div>
        <div class="file_left">
          <UploadPreview :file-list="info.albumList || []" layout="list"></UploadPreview>
        </div>
      </div>

      <div class="infor_main_right" v-if="info.status == '0' || info.status == '1'">
        <div class="main_left_title">评分</div>
        <div class="main_left_content" :class="{ aceive_no: info.status == '0' }">
          {{ info.status == '0' ? '0' : info.score }}分
        </div>
        <div class="main_left_title">审核结果</div>
        <div class="main_left_content">{{ enmuData(info.status) }}</div>
        <div class="exit_btn" v-if="info.isCanApprove === '1' && bonusType === '3'">
          <el-button type="primary" size="small" @click="exitDialog = true">不通过</el-button>
          <div class="word">提醒：各单位录入结果系统默认审核通过，如有异议可点击“不通过”退回</div>
        </div>
        <div class="main_left_title" v-if="info.confirmSuggestion">审核意见</div>
        <div class="main_left_content" v-if="info.confirmSuggestion">{{ info.confirmSuggestion }}</div>
      </div>
    </div>

    <!-- 退回 -->
    <XnDialog
      custom-class="branch_dialog exit_dialog-points"
      title="审核意见"
      :visible.sync="exitDialog"
      @close="exitDialog = false"
      width="555px">
      <div class="content">
        <el-input
          placeholder="请输入原因"
          type="textarea"
          v-model="exitSuggest"
          size="small"
          :rows="5"
          maxlength="128"
          show-word-limit></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exitDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitData" class="sub-btn">提 交</el-button>
      </div>
    </XnDialog>
  </div>
</template>

<script>
import { getBonusPointsDetails, returnBonusPoints } from '@apis/bonus.js'
import UploadPreview from '@com/UploadPreview/index.vue'
import XnDialog from '@com/xnDialog.vue'
export default {
  components: {
    UploadPreview,
    XnDialog,
  },
  props: {
    // 1加分项，2减分项
    activeOne: {
      type: String,
      default: '1',
    },
    // 1录入，3审定
    bonusType: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      stateList: [
        { id: '0', name: '不通过' },
        { id: '1', name: '通过' },
      ],
      info: {
        saBonusListResponse: {
          ramarkCalcRule: '',
          optionType: '',
          id: '',
        },
      },
      exitSuggest: '',
      boundsName: '',
      exitDialog: false,
    }
  },
  watch: {
    activeOne: {
      handler(news) {
        this.newType = news
      },
      deep: true,
    },
  },
  created() {
    this.newType = this.activeOne
    if (this.$route.query.id && this.$route.query.type === '4') {
      this.getDetail(this.$route.query.id, '', '', '0')
    }
  },
  mounted() {},
  methods: {
    getDetail(id, boundsName) {
      this.boundsName = boundsName
      getBonusPointsDetails({
        id: id,
      }).then(res => {
        if (res.status === 200) {
          this.info = res.data
          this.exitSuggest = ''
        }
      })
    },
    enmuData(code) {
      if (code) {
        const nameArr = this.stateList.filter(item => {
          return item.id === code
        })
        if (nameArr.length > 0) {
          return nameArr[0].name
        } else {
          return '--'
        }
      }
    },

    // 提交审核
    submitData() {
      if (!this.exitSuggest) return this.$message.warning('请填写审核意见')
      this.saveData()
    },
    saveData() {
      returnBonusPoints({
        id: this.info.id,
        confirmSuggestion: this.exitSuggest,
        result: '0',
      }).then(res => {
        if (res.status === 200) {
          this.$message({
            message: res.message,
            type: 'success',
          })
          this.exitDialog = false
          const id = ''
          this.$emit('backPage', id)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.bonus_box_r {
  height: 100%;
  font-size: 14px;
  .aceive_no {
    color: #a7a7a7 !important;
  }
  .right_infor_title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e4e7ed;
    font-size: 18px;
    font-weight: 600;
    padding-left: 30px;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .right_infor_tips {
    height: 60px;
    border-bottom: 1px solid #e4e7ed;
    padding-left: 30px;
    display: flex;
    align-items: center;
    .detail_imporatnt_one {
      display: flex;
      margin-right: 6%;
      align-items: center;
      .iconfont {
        font-size: 40px;
        padding-right: 10px;
      }
      .detail_imporatnt_one_cont {
        color: #a7a7a7;
      }
      .color_red {
        color: #d9001b;
      }
      .color_blue {
        color: #2b78f1;
      }
    }
  }
  .right_infor_main {
    height: calc(100% - 110px);
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    .infor_main_left {
      width: 60%;
      padding: 10px 40px;
    }
    .infor_main_right {
      width: 40%;
      padding: 10px;
      // border-left: 1px solid #ececec;
      /deep/ .el-form-item__error {
        padding-top: 0px;
      }
      .board_list_score {
        line-height: 30px;
        // border: 2px solid #eee;
        p {
          font-size: 14px;
          padding: 0 10px;
          background-color: #f9f9f9;
        }
        .board_score_fix {
          margin: 10px 0;
          font-size: 16px;
          display: flex;
        }
        .board_score_num {
          line-height: 36px;
          width: 50%;
          text-align: center;
          border: 2px solid #004db6;
        }
        .board_score_num_r {
          line-height: 36px;
          width: 50px;
          text-align: center;
          display: inline-block;
          border: 2px solid #004db6;
          border-left: none;
          background-color: #e9eff48f;
        }
      }
      .sub_r {
        text-align: right;
        margin-top: 10px;
      }
      .exit_btn {
        margin-top: 30px;
        .button {
          padding: 5px 10px;
          color: #fff;
          background-color: #409eff;
          border-color: #409eff;
          border-radius: 2px;
          cursor: pointer;
          width: 80px;
          min-width: 50px;
          text-align: center;
        }
        .word {
          margin-top: 6px;
          color: #a7a7a7;
        }
      }
    }
    .main_left_title {
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
    }
    .special_tips {
      font-size: 14px;
      color: #a7a7a7;
      p {
        margin-bottom: 10px;
      }
    }
    .main_left_content {
      line-height: 26px;
      margin-bottom: 10px;
      color: #666666;
      width: 100%;
      padding: 5px 10px;
      background-color: #e9eff48f;
      white-space: pre-wrap;
    }
    .file_left {
      padding: 10px;
      background-color: #e9eff48f;
      margin-bottom: 10px;
    }
  }
}
</style>
<style lang="scss">
.exit_dialog-points {
  .el-dialog__body {
    min-height: 0 !important;
  }
  .content {
    padding: 0 15px;
  }

  .dialog-footer {
    font-size: 14px;
    .sub-btn {
      background-color: #004db6;
      border-color: #004db6;
    }
  }
}
</style>
